<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标注</title>
</head>
<body>
<div id="container"></div>
<script src="g2.js"></script>
<script>
  const data = [];
  const time = Math.floor(new Date().getTime() / 1000) * 1000;
  console.log('time',Math.floor(1.9) )
  for (let i = -19; i <= 0; i++) {
    data.push({
      time: time + i * 3 * 1000,
      value: Math.random() + 0.25,
    });
  }

  // 查找最大值
  function findMax() {
    let maxValue = 0;
    let maxObj = null;
    data.forEach((obj) => {
      if (obj.value > maxValue) {
        maxValue = obj.value;
        maxObj = obj;
      }
    });
    return maxObj;
  }

  const chart = new G2.Chart({
    // 创建图表
    container: 'container',
    autoFit: false,
    width: 500,
    height: 450,
  });
  chart.data(data.concat([]));
  chart.scale({
    time: {
      type: 'time',
      mask: 'HH:mm:ss',
    },
    value: {
      nice: true,
    },
  });
  chart.animate(false);
  chart.line().position('time*value');

  chart.annotation().text({
    position() {
      const obj = findMax();
      return [obj.time, obj.value];
    },
    content: '最大值',
  });

  chart.render();

  setInterval(function () {
    data.shift();
    data.push({
      time: new Date().getTime(),
      value: Math.random() + 0.25,
    });
    chart.changeData(data.concat([]));
  }, 3000);
</script>
</body>
</html>
